Monochromatic model.
This scheme is based on a single color tint, and uses only variations made by changing its saturation and brightness.
The result is comfortable for eyes, even when using aggressive color. However, it's harder to find accents and highlights.
Monochromatic variations are made for each color in other schemes, too.
Complementary (contrast) model.
The primary color is supplemented with its complement (color on the opposite side of the wheel). One warm and one cold color is always created – we have to consider, which one will be dominant, and whether the design should look warm, or cold.
The complementary color should be used carefully in the design, only as the accent, it shouldn't be overused.
Triad (soft contrast) model.
The primary color is supplemented with two colors, placed identically on both sides of its complement. Unlike the "sharp" contrast, this scheme is often more comfortable for the eyes, it's softer, and there is more space for balancing warm/cold colors.
You can set the distance from the complement. The less the angle is, the more similar the secondary colors are. For best results, the angle should be 15 to 60 degree. The exact value of 60 degree makes a special color scheme:
The Triade is made by three colors evenly distributed the color wheel (by 120 degrees). The triade schemes are vibrating, full of energy, and have a lot of possibilities to make contrasts, accents and warm/cold balance.
Tetrad (double-contrast) model.
This scheme is made by a pair of colors and their complements. It's based on
the Tetrade – the foursome of colors evenly distributed on the color wheel (by 90 degreees). The Tetrade is very
aggressive color scheme, requiring very good planning and very sensitive approach to relations of these colors.
Less distance between colors causes less tension in the result. However, this scheme is always more "nervous" and "action" than other schemes. While working with it, we have to take care of relations between one color and its adjacent color complement. In case of the Tetrade (angle 90°), good feeling and very sensitive approach are necessary.
Analogic model.
This scheme is made by the primary color and its adjacent colors – two colors identically on both sides. It always looks very elegantly and clear, the result has less tension and it's uniformly warm, or cold. If a color on the warm-cold border is chosen, the color with opposite "temperature" may be used for accenting the other two colors.
You can set the distance of adjacent (secondary) colors, the angle shouldn't exceed 60 degree.
Accented analogic model.
This is the Analogic model with complementary (contrast) color added. It must be treated as a complement only – it adds tension to the palette, and it's too aggressive when overused. However, used in details and as the accent, it can be very effective and elegant.
Hue. Click this tab to display the color wheel pane to adjust hues of Primary, Complementary and Secondary colors.
Adjust Scheme. Click this pane to adjust brightness and saturation of colors and the contrast of the scheme, or just select from predefined presets.
Scheme Info. Click this pane to display color values of actual scheme and export them in various formats.
Primary color hue. Click and drag the spot around the color wheel to change the value. Double-click to type the numeric value.
Complementary color hue. Click and drag the spot around the color wheel to change the value. Double-click to type the numeric value.
Secondary color hue. Click and drag the spot farther or closer to the primary color to change the angle/distance. Double-click to type the numeric value.
Secondary color hue. Click and drag the spot farther or closer to the primary color to change the angle/distance. Double-click to type the numeric value.
Primary color hue value. Click to type the numeric value.
Secondary color hues angle/distance. Click to type the numeric value. Makes sense only with schemes which use secondary colors.
Primary color RGB value. Click to type the numeric value.
Warning: due to rounding error during the color conversion, the RGB value used in the scheme may slightly differ from the entered value.
Primary color RGB values.
Scheme Presets. Click and select from predefined combinations of brightness, saturation and contrast of the scheme.
Brightness and Saturation. Click and drag the spot around the square to adjust brightness (up=lighter, down=darker) and saturation (right=saturate, left=desaturate).
Scheme contrast. Click and drag the spot around the square to adjust the contrast of color variants in the scheme (up/down for dark variants, left/right for light variants).
Export as text. Export the scheme as text to copy/paste values from it later, or to send the values to someone else by email etc.
Export HTML+CSS. Export the scheme as HTML table with CSS stylesheet. You can save the generated HTML file for latter use.
Export XML. Export the scheme as XML to be processed by a XML parser.
Export ACO. Export the scheme as Photoshop color palette. Save the file and import it to the Photoshop, Fireworks or any other application supporting this format.
Export GPL. Export the scheme as GIMP color palette. Save the file and import it to the GIMP editor.
The scheme palette. Just the four main colors of the scheme are shown to easily identify the scheme impression.
Link to the scheme. There is an unique ID for each scheme. Use this link to bookmark current scheme or send it to someone else.
Palette preview. See how selected colors and their variants work together.
Palette preview. See how selected colors and their variants work together.
Web page example (light/positive). Click to view an example web page created using current color scheme. This is only an example, the palette colors may be used in hundreds of variantions.
Web page example (dark/negative). Click to view an example web page created using current color scheme. This is only an example, the palette colors may be used in hundreds of variantions.
Show text sample. Check to see white, black and 50% gray text displayed within the preview above.
"Color-blind" preview. Click and select an item from the list to simulate how people with common color vision deficiency will see the color scheme.
Show tooltips. Check and move the cursor over controls and parts of the application to see helpful tooltips.
UI speed (frames per second). Indicates the response speed of your graphic interface. The higher value, the better. Low values appear on slower computers. With lower values (5–10 or less) use the mouse controls with patience and drag them slowly.
Randomize. Click to create random palette – all the model, hues and variants will be selected randomly.
